* {
    box-sizing: border-box;
}

html,
body {
    position: relative;
    padding: 0;
    margin: 0 auto;
    width: 100%;
    max-width: 750px;
    line-height: 1.468;
    background: #efeff4;
}

html {
    -webkit-tap-highlight-color: transparent;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
}

body {
    font-size: .28rem;
}

input {
    -webkit-appearance: none;
}

.bgf {
    background: #fff;
}

.mt_9rem {
    margin-top: .9rem;
}

.clearfix {
    &:before,
    &:after {
        content: " ";
        display: table;
    }
    &:after {
        clear: both;
    }
}

.avatar {
    display: inline-block;
    width: 100%;
    padding-top: 100%;
    font-size: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border: 1px solid #b7b7b8;
    &.avatar-middle {
        padding-top: 0;
        width: 1.2rem;
        height: 1.2rem;
        border-radius: 50%;
    }
    &.avatar-sm {
        padding-top: 0;
        width: .94rem;
        height: .94rem;
    }
    &.avatar-plus {
        padding-top: 0;
        width: 1.3rem;
        height: 1.3rem;
        border-radius: 50%;
    }
    &.avatar-radius {
        border-radius: 5px;
    }
}

.container {
    margin: 0 15px;
}

.formpage {
    padding-bottom: 15px;
    ol.note-list {
        &>li {
            position: relative;
            padding: 10px 15px;
            display: flex;
            -webkit-box-align: center;
            -webkit-align-items: center;
            align-items: center;
            background: #fff;
            border-bottom: 1px solid #e5e5e5;
            &:first-child {
                border-top: 1px solid #e5e5e5;
            }
            .u-hd_plus {
                span {
                    padding-left: 5px;
                }
            }
        }
    }
}

.membeys-box {
    .header {
        padding: 17px 0 5px;
        color: #bfbfbf;
        font-size: .26rem;
        .t {
            color: #3a3b3f;
        }
    }
    .avatar {
        border-radius: 5px;
    }
    .name {
        color: #aaa;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    ol {
        margin: 0 -7px;
        padding: 0;
        list-style: none;
    }
    li {
        position: relative;
        float: left;
        padding: 3px 7px;
        width: 20%;
        text-align: center;
    }
}

//-----------------------
// banner
//-----------------------
.carousel {
    &>img {
        width: 100%;
    }
}

//-----------------------
// 认证结果区域
//-----------------------
.authresult-area {
    padding: 20px;
    text-align: center;
    &.bg-w {
        background: #fff;
    }
    &.postsus {
        padding-top: 35px;
    }
    .text {
        margin-top: 20px;
        color: #000;
        font-size: .4rem;
    }
    .tips {
        margin-top: 20px;
        color: #888;
    }
}

//-----------------------
// 个人中心
//-----------------------
.viptag {
    position: absolute;
    bottom: .08rem;
    right: 10px;
    width: .38rem;
    height: .38rem;
    background: url(../img/icon-v.png) no-repeat center;
    background-size: 100%;
}

.h-p {
    position: relative;
    padding-right: 15px;
}

.input-mask-p {
    position: relative;
    .input-mask {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
        opacity: 0;
    }
}

.u-hd_p,
.u-hd_plus {
    color: #000;
    font-weight: bold;
}

.u-hd_p {
    font-size: .34rem;
}

.u-hd_plus {
    font-size: .38rem;
}

.u-ft_tips {
    color: #999;
    font-size: .34rem;
    font-weight: bold;
}

.u-span {
    color: #353638;
    font-size: .26rem;
}

.u-time {
    color: #999;
    font-size: .26rem;
}

//-----------------------
// 邀请
//-----------------------
.invit-view {
    position: relative;
    margin-top: .89rem;
    text-align: center;
    .avatar {
        position: relative;
        padding-top: 0;
        width: 3.2rem;
        height: 3.2rem;
        border-radius: 50%;
        border: 5px solid #efeff4;
        z-index: 2;
    }
    .view {
        margin: -1rem auto 0;
        width: 4.22rem;
    }
    .in {
        padding: 1.34rem .45rem .33rem;
        background: #FFF;
    }
    .cord {
        width: 100%;
    }
    .t {
        margin-top: .28rem;
        color: #b1b1b1;
    }
    .t2 {
        margin-top: .36rem;
        color: #393a3e;
        font-size: .36rem;
    }
}

//-----------------------
// 积分规则
//-----------------------
.rule-detail {
    color: #353535;
    .cell {
        padding-bottom: 1px;
        margin-top: 15px;
    }
    p {
        margin-bottom: 10px;
    }
}

//-----------------------
// icon
//-----------------------
.icon {
    display: inline-block;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    vertical-align: -.2em;
    &-pen {
        width: .39rem;
        height: .39rem;
        background-image: url(../img/icon-pen.png);
    }
    &-share {
        width: .39rem;
        height: .39rem;
        background-image: url(../img/icon-share.png);
    }
    &-card {
        width: .39rem;
        height: .39rem;
        background-image: url(../img/icon-card.png);
    }
}

//-----------------------
// 重写 weui 部分样式
//-----------------------
.integral-head {
    position: relative;
    padding: 41px 0;
    background: #fff;
    text-align: center;
    .number {
        color: #09bb07;
        line-height: 1;
        font-size: 1.04rem;
        //      font-weight: bold;
    }
    .s {
        color: #bfbfbf;
        font-size: .34rem;
    }
    .rule {
        position: absolute;
        top: 19px;
        right: 15px;
    }
    .weui-icon-info-circle {
        vertical-align: -.2em;
    }
}

.share-guide {
    position: fixed;
    top: 0;
    left: 0;
    padding: 10px;
    width: 100%;
    height: 100%;
    text-align: right;
    background: rgba(0, 0, 0, .5);
    z-index: 9999;
    .t {
        color: #fff;
        font-size: .4rem;
        &:after {
            display: inline-block;
            margin-left: 6px;
            width: .89rem;
            height: .57rem;
            background: url(../img/share-guide.png) no-repeat center center;
            background-size: 100%;
            content: "";
        }
    }
}

//-----------------------
// 重写 weui 部分样式
//-----------------------
.weui-cells__title {
    padding-bottom: .3em;
}

.cell-label {
    color: #000;
    font-size: .34rem;
    //  font-weight: bold;
}

.weui-label-3em,
.weui-label-5em,
.weui-label-6em {
    @extend .cell-label;
}

.weui-label-3em {
    width: 3.5em;
}

.weui-label-5em {
    width: 5.5em;
}

.weui-label-6em {
    width: 6.5em;
}

.weui-cell_input_after {
    padding-top: 10px;
    padding-bottom: 10px;
}

.weui-vcode-btn_cus {
    margin: .16rem 15px .18rem 0;
}

.sub-wrapper {
    padding: 0 15px;
}

.guide-cell-view {
    position: relative;
    padding-bottom: 1px;
    .line {
        position: absolute;
        top: 12px;
        left: 0;
        width: 1px;
        height: -webkit-calc(100% - 12px);
        height: calc(100% - 12px);
        border-radius: 5px;
        background: #1AAD19;
    }
}

.guide-cell {
    position: relative;
    padding: 10px 0 10px 1.2em;
    .serial {
        position: absolute;
        top: 10px;
        left: -1em;
        width: 2em;
        height: 2em;
        color: #fff;
        line-height: 1.8em;
        text-align: center;
        border-radius: 50%;
        background: #1AAD19;
        border: 2px solid #fff;
        border-right-color: #1AAD19;
        font-size: .26rem;
        z-index: 6;
    }
    .detail {
        margin-top: 5px;
        line-height: 1.8;
        text-align: justify;
    }
    img {
        display: block;
        margin: 5px auto;
        //      max-width: 100%;
        width: 100%;
    }
}

@media only screen and (min-width:481px) {
    html {
        font-size: 80px;
    }
}

@media only screen and (max-width:480px) {
    html {
        font-size: 64px;
    }
}

@media only screen and (max-width:414px) {
    html {
        font-size: 55.2px;
    }
}

@media only screen and (max-width:375px) {
    html {
        font-size: 50px;
    }
}

@media only screen and (max-width:360px) {
    html {
        font-size: 48px;
    }
}

@media only screen and (max-width:320px) {
    html {
        font-size: 42.66666px;
    }
}